<template>
  <div>
    <h3>38.element-plus的使用</h3>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in comArr" :key="item.label">
        <component :is="item.name"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ColCom from './components/ColCom.vue'
import ContainerCom from './components/ContainerCom.vue'
import IconCom from './components/IconCom.vue'
import ButtonCom from './components/ButtonCom.vue'
import FormCom from './components/FormCom.vue'
import TableCom from './components/TableCom.vue'
import PaginationCom from './components/PaginationCom.vue'
import InfiniteScrollCom from './components/InfiniteScrollCom.vue'
export default {
  name: 'element-ui',
  components: {
    ColCom,
    ContainerCom,
    IconCom,
    ButtonCom,
    FormCom,
    TableCom,
    PaginationCom,
    InfiniteScrollCom
  },
  data() {
    return {
      activeName: 'ColCom',
      comArr: [
        {
          label: 'Layout布局',
          name: 'ColCom'
        },
        {
          label: 'Container布局容器',
          name: 'ContainerCom'
        },
        {
          label: 'icon图标',
          name: 'IconCom'
        },
        {
          label: '按钮',
          name: 'ButtonCom'
        },
        {
          label: '表单',
          name: 'FormCom'
        },
        {
          label: '表格',
          name: 'TableCom'
        },
        {
          label: '分页',
          name: 'PaginationCom'
        },
        {
          label: '无限滚动',
          name: 'InfiniteScrollCom'
        }
      ]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped></style>
